<template>
  <div>
    <el-dialog title="日志详情" :width="1000" v-model="isShowDialog">
      <table>
        <tbody>
        <tr>
          <td class="name-style">ID</td>
          <td>{{ detail?.operId }}</td>
        </tr>
        <tr>
          <td class="name-style">操作员</td>
          <td>{{ detail?.operName }}</td>
        </tr>
        <tr>
          <td class="name-style">AppKey</td>
          <td class="color-primary cur-pointer" @click="handleAppDetail">{{ detail?.appKey }}</td>
        </tr>
        <tr>
          <td class="name-style">操作人IP</td>
          <td>{{ detail?.operIp }}</td>
        </tr>
        <tr>
          <td class="name-style">IP属地</td>
          <td>{{ detail?.operLocation }}</td>
        </tr>
        <tr>
          <td class="name-style">URL</td>
          <td class="time-3">
            <div style="width: 800px;">{{ detail?.operUrl }}</div>
          </td>
        </tr>
        <tr>
          <td class="name-style">请求方法</td>
          <td class="time-3">{{ detail?.requestMethod }}</td>
        </tr>
        <tr>
          <td class="name-style">User Agent</td>
          <td class="time-3">{{ detail?.userAgent }}</td>
        </tr>
        <tr>
          <td class="name-style">创建时间</td>
          <td class="time-3">{{ detail?.operTime }}</td>
        </tr>
        <tr>
          <td class="name-style">请求参数</td>
          <td class="time-3">
            <div style="width: 800px;">{{ detail?.operParam }}</div>
          </td>
        </tr>
        <tr>
          <td class="name-style">耗时/s</td>
          <td>{{ detail?.operCost / 1000 }}</td>
        </tr>
        <tr>
          <td class="name-style">QPS</td>
          <td>{{ detail?.qps }}</td>
        </tr>
        </tbody>
      </table>
      <template #footer>
				<span class="dialog-footer">
					<el-button type="danger" @click="onCancel" size="default">关闭</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import {reactive, toRefs, defineComponent, ref} from 'vue';

export default defineComponent({
  name: "apiV1SystemSysOperLogDetail",
  setup(props, {emit}) {
    const appDetailRef = ref();
    const state = reactive({
      isShowDialog: false,
      detail: {}
    });
    // 打开弹窗
    const openDialog = (_row: any) => {
      state.detail = _row;
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    const handleAppDetail = () => {
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      handleAppDetail,
      ...toRefs(state),
    };
  }
})
</script>
<style scoped lang="scss">
table {
  border-collapse: collapse;
  width: 100%;

  tr {
    border: 1px solid #EFEFEF;

    td {
      border: 1px solid #EFEFEF;
      padding: 10px;
    }

    .name-style {
      background-color: #f5f7fa;
      font-weight: bold;
      min-width: 120px;
      text-align: center;
      width: 15%;
    }

    .time-3 {
      width: 85%;
    }
  }
}
</style>
